<template>
  <div class="search">
    <Row :gutter="16" class="all-height">
      <Col :span="showRight ? 18 : 24" class="all-height">
        <Card class="all-height card-child-height">
          <div style="display: flex; justify-content: space-between; align-items: center; height: 40px">
            <div style="display: flex; flex-wrap: nowrap; overflow-x: auto">
              <!--              <Button @click="add" type="primary" icon="md-add">添加</Button>-->
              <Button @click="delAll" icon="md-trash">批量删除</Button>
              <Button @click="getDataList" icon="md-refresh">刷新</Button>
              <Button @click="dropExportAll" icon="">导出</Button>
              <!--              <Button type="dashed" @click="openTip=!openTip">{{openTip ? "关闭提示" : "开启提示"}}</Button>-->
            </div>
            <Col span="2" style="text-align: right">
              <Icon
                  color="#fff"
                  style="background: rgb(45, 154, 244); border-radius: 50%; padding: 3px"
                  :type="!showRight ? `ios-arrow-back` : `ios-arrow-forward`"
                  @click.native="clickShowRight"
              ></Icon>
            </Col>
          </div>
          <div class="mt-12" style="height: 40px" v-show="openTip">
            <Alert show-icon>
              已选择
              <span class="select-count">{{ selectList.length }}</span>
              项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </div>

          <div class="mt-12" style="height: calc(100% - 104px)">
            <div class="tableContainer ">
              <div v-if="loading" class="wh-100 d-flex-around-center">
                <Spin></Spin>
              </div>
              <div v-else v-ref-height="abca" class="wh-100">
                <el-table v-if="data.length > 0" :loading="listLoading" ref="table" :height="abca.value" :data="data" empty-text="暂无数据"
                          border @selection-change="handleSelectionChange" style="width: 100%">
                  <el-table-column type="selection" :width="tableWidth"></el-table-column>
                  <el-table-column type="index" label="序号" :width="tableWidth"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <el-table-column prop="schoolName" label="学校名称"></el-table-column>
                  <el-table-column prop="xsh" label="院系名称"></el-table-column>
                  <el-table-column prop="speciality" label="专业"></el-table-column>
                  <el-table-column prop="ksh" label="考生号"></el-table-column>
                  <el-table-column prop="xh" label="学号"></el-table-column>
                  <el-table-column prop="idCard" label="身份证号"></el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status === '1'">有基础信息无生源</span>
                      <span v-if="scope.row.status === '2'">无基础信息有生源</span>
                      <span v-if="scope.row.status === '3'">基础信息库与生源库信息不一致</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="person" label="操作人"></el-table-column>
                  <el-table-column prop="time" label="操作时间"></el-table-column>
                  <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-button @click="viewYdData(scope.row)" type="text" size="small">查看</el-button>
                      <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div v-else class="wh-100">
                  <NoData class="wh-100"></NoData>
                </div>
              </div>
            </div>

            <div class="d-flex-center" style="height: 100px">
              <Page
                  :current="searchForm.pageNumber"
                  :total="total"
                  :page-size="searchForm.pageSize"
                  @on-change="changePage"
                  @on-page-size-change="changePageSize"
                  :page-size-opts="[10, 20, 50]"
                  size="small"
                  show-total
                  show-elevator
                  show-sizer
              ></Page>
            </div>
            <!--            <Table-->
            <!--                :height="height1"-->
            <!--                :loading="loading"-->
            <!--                border-->
            <!--                :columns="columns"-->
            <!--                :data="data"-->
            <!--                ref="table"-->
            <!--                sortable="custom"-->
            <!--              >-->

            <!--            </Table>-->
          </div>
        </Card>
      </Col>
      <Col span="6" class="all-height" v-show="showRight">
        <Card class="all-height card-child-height">
          <Row v-show="openSearch" @keydown.enter.native="handleSearchB">
            <Col span="24">
              <div class="drawer-header">
                <div style="margin-right: 16px">查询区</div>
              </div>
            </Col>
            <Col span="24">
              <Form ref="searchForm" :model="searchForm" :label-width="labelWidth" class="marginForm">
                <FormItem label="身份证号" prop="idCard">
                  <Input type="text" v-model="searchForm.cardId" clearable placeholder="请输入身份证号"
                         style="width: 100%" @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem v-if="resource === '1'" label="学校名称" prop="schoolName">
                  <Input type="text" v-model="searchForm.schoolName" clearable placeholder="请输入学校名称"
                         style="width: 100%" @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem v-if="resource === '1' || resource === '2'" label="院系名称" prop="collegeName">
                  <Input type="text" v-model="searchForm.collegeName" clearable placeholder="请输入学院名称"
                         style="width: 100%" @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem label="专业" prop="profession">
                  <Input type="text" v-model="searchForm.profession" clearable placeholder="请输入专业"
                         style="width: 100%" @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem label="考生号" prop="ksh">
                  <Input type="text" v-model="searchForm.ksh" clearable placeholder="请输入考生号" style="width: 100%"
                         @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem label="学号" prop="xh">
                  <Input type="text" v-model="searchForm.xh" clearable placeholder="请输入学号" style="width: 100%"
                         @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem label="姓名" prop="name">
                  <Input type="text" v-model="searchForm.name" clearable placeholder="请输入姓名" style="width: 100%"
                         @click.prevent="$event.preventDefault()"/>
                </FormItem>
                <FormItem label="状态" prop="staus">
                  <Select v-model="searchForm.status" clearable
                          style="width: 100%">
                    <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
                <!--              <FormItem class="br mt-12">-->
                <!--                <Button @click="handleSearchB" type="primary" icon="ios-search"-->
                <!--                >搜索-->
                <!--                </Button-->
                <!--                >-->
                <!--                <Button @click="handleReset">重置</Button>-->
                <!--              </FormItem>-->
                  <FormItem class="br mt-12 mb-12 box-key">
                  <Button @click="handleSearchB" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </FormItem>
              </Form>
            </Col>
          </Row>
          <Row class="calc-sm-height" v-show="!openSearch">
            <!--            <addEdit :data="form" :type="showType" v-model="showDrawer" @on-submit="getDataList" />-->
            <compareDetail :data="form" :type="showType" v-model="showDrawer" @open-search="changeOpenSearch"/>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import {getBysXjCompareList, deleteBysXjCompare, exportAll} from '@/api/bys/xj/xjCompare.js';
import {searchByStatusAPI} from '@/api/bys/recruitmentManagement/index.js';
// 根据你的实际添加编辑组件位置路径修改
import addEdit from './addEdit.vue';
import compareDetail from './detail.vue';
import Cookies from 'js-cookie';
import NoData from '@/components/NoData.vue';

export default {
  name: 'bysXjCompare',
  components: {
    addEdit,
    NoData,
    compareDetail
  },
  data() {
    return {
      listLoading: false,
      tableWidth: 60,
      labelWidth: 110,
      resource: '',
      abca: {value: 0},
      cardId: '',
      status: '',
      bysId: '',
      height1: 0,
      openSearch: true,
      showRight: true,
      openTip: true, // 显示提示
      showType: '0', // 添加或编辑标识
      showDrawer: false, // 显示添加编辑抽屉
      loading: false, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 20, // 页面大小
        sort: 'time', // 默认排序字段
        order: 'desc', // 默认排序方式
        cardId: '',
        schoolName: '',
        collegeName: '',
        profession: '',
        ksh: '',
        xh: '',
        xm: '',
        status: ''
      },
      selectList: [], // 多选数据
      form: {},
      statusList: [
        {value: '1', label: '有基础信息无生源'},
        {value: '2', label: '无基础信息有生源'},
        {value: '3', label: '基础信息库与生源库信息不一致'}
      ],
      columns: [
        // 表头
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          minWidth: 120,
          sortable: false
        },
        {
          title: '学校名称',
          key: 'schoolName',
          minWidth: 120,
          align: 'center'
        },
        {
          title: '院系名称',
          key: 'xsh',
          minWidth: 120,
          sortable: false
        },
        {
          title: '专业',
          key: 'speciality',
          minWidth: 120,
          sortable: false
        },
        {
          title: '考生号',
          key: 'ksh',
          minWidth: 180,
          sortable: false
        },
        {
          title: '身份证号',
          key: 'idCard',
          minWidth: 180,
          sortable: false
        },
        {
          title: '状态',
          key: 'status',
          minWidth: 120,
          sortable: false
        },
        {
          title: '操作人',
          key: 'person',
          minWidth: 120,
          sortable: false
        },
        {
          title: '操作时间',
          key: 'time',
          minWidth: 120,
          sortable: false
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 150,
          render: (h, params) => {
            let viewYdData = '';
            if (!params.row.sfyyd) {
              viewYdData = h(
                  'a',
                  {
                    on: {
                      click: () => {
                        this.viewYdData(params.row);
                      }
                    }
                  },
                  '查看'
              );
            }
            return h('div', [
              viewYdData,
              h('Divider', {
                props: {
                  type: 'vertical'
                }
              }),
              h(
                  'a',
                  {
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  '删除'
              )
            ]);
          }
        }
      ],
      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0 // 表单数据总数
    };
  },
  // provide() {
  //     return {
  //         getDataList: this.getDataList
  //     };
  // },
  methods: {
    // tableheig(){
    //   var bbb = document.getElementsByClassName("calc-px-height")[0].scrollHeight
    //   var aaa = document.getElementsByClassName("calc-px-height")[0].children[0].children[0].children[1]
    //   var ccc = document.getElementsByClassName("calc-px-height")[0].children[0].children[0].children[0].scrollHeight
    //   var ddd = bbb - ccc
    //   console.log(bbb ,'00000000000000')
    //   aaa.style.height = `${ddd}px`
    //
    //   if(this.searchForm.pageSize === 10){
    //     this.height1 = 0
    //   }else{
    //     this.height1 = document.getElementsByClassName("calc-px-height")[0].scrollHeight
    //     if(this.total < (this.searchForm.pageNumber)*(this.searchForm.pageSize)){
    //       var r = (this.searchForm.pageNumber - 1) * this.searchForm.pageSize
    //       var a = this.total - r
    //       var s = (a * 43) + 65
    //       if(s < this.height1){
    //         this.height1 = 0
    //       }
    //     }
    //   }
    //   if(this.total < 10){
    //     this.height1 = 0
    //   }
    // },
    handleSelectionChange(val) {
      this.selectList = val;
    },
    init() {
      // this.getDataList();
      this.getDataListB();
    },
    // 显示隐藏右侧区域
    clickShowRight() {
      this.showRight = !this.showRight;
    },
    // handleSearchA() {
    //     this.searchForm.cardId = this.cardId;
    //
    //     this.searchForm.status = '';
    //     this.getDataList();
    // },
    handleSearchB() {
      this.getDataListB();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      // this.getDataList();
      this.getDataListB();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      // this.getDataList();
      this.getDataListB();
    },

    handleReset() {
      this.searchForm.cardId = '';
      this.searchForm.status = '';
      this.$refs.searchForm.resetFields();
      // this.searchForm.pageNumber = 1;
      // this.searchForm.pageSize = 50;
      // 重新加载数据
      // this.getDataList();
      this.getDataListB();
    },
    // changeSort(e) {
    //   this.searchForm.sort = e.key;
    //   this.searchForm.order = e.order;
    //   if (e.order === "normal") {
    //     this.searchForm.order = "";
    //   }
    //   this.getDataList();
    // },
    clearSelectAll() {
      this.$refs.table.clearSelection(false);
    },
    changeOpenSearch() {
      this.openSearch = true;
    },

    dropExportAll() {
      this.loading = true;
      exportAll().then(res => {
        this.loading = false;
        // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
        const blob = new Blob([res], {type: 'charset=utf-8'});
        let url = window.URL.createObjectURL(blob);

        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '异动数据.xlsx');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 删除节点
        window.URL.revokeObjectURL(url); //释放该 url
      });
    },
    getDataList() {
      this.loading = true;
      getBysXjCompareList(this.searchForm)
          .then(res => {
            if (res.success) {
              this.loading = false;
              this.$message.success(res.message);
              this.data = res?.result?.result || [];
              this.total = res?.result?.total || 0;
            }
          })
          .finally(() => {
            this.loading = false;
          });
    },
    getDataListB() {
      // this.loading = true;
      this.listLoading = true
      searchByStatusAPI(this.searchForm)
          .then(res => {
            this.listLoading = false
            if (res.success) {
              console.log(res.result, 'bbbbb');
              this.loading = false;
              this.$message.success(res.message);
              this.data = res?.result?.result || [];
              this.total = res?.result?.total || 0;
              // this.tableheig()
              // if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
              //   this.searchForm.pageNumber -= 1;
              //   this.getDataList();
              // }
            }
          })
          .finally(() => {
            this.loading = false;
          });
    },
    add() {
      this.showType = '2';
      this.showDrawer = true;
    },
    // edit(v) {
    //   // 转换null为""
    //   for (let attr in v) {
    //     if (v[attr] == null) {
    //       v[attr] = "";
    //     }
    //   }
    //   let str = JSON.stringify(v);
    //   let data = JSON.parse(str);
    //   this.form = data;
    //   this.showType = "1";
    //   this.showDrawer = true;
    //   this.openSearch = false;
    //   this.$refs.addOrEdit.form = data;
    // },
    viewYdData(v) {
      console.log(v);
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = '';
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.form = data;
      console.log(this.form, 'form');
      this.showType = '1';
      this.showDrawer = true;
      this.openSearch = false;
      this.bysId = v.bysId;
    },
    remove(v) {
      this.$Modal.confirm({
        title: '确认删除',
        // 记得确认修改此处
        content: '您确认要删除该条数据?',
        loading: true,
        onOk: () => {
          // 删除
          deleteBysXjCompare({ids: v.id}).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success('操作成功');
              this.clearSelectAll();
              // this.getDataList();
              this.getDataListB();
            }
          });
        }
      });
    },
    delAll() {
      if (this.selectList.length <= 0) {
        this.$Message.warning('您还未选择要删除的数据');
        return;
      }
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
        loading: true,
        onOk: () => {
          let ids = '';
          this.selectList.forEach(function (e) {
            ids += e.id + ',';
          });
          ids = ids.substring(0, ids.length - 1);
          // 批量删除
          deleteBysXjCompare({ids: ids}).then(res => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success('操作成功');
              this.clearSelectAll();
              // this.getDataList();
              this.getDataListB();
            }

          });
        }
      });
    },
    onRestWindow() {
      // this.columns = this.restTableCellWidth(this.columns_1)
      this.labelWidth = this.searchLabelWidth(110)
      this.tableWidth = this.searchLabelWidth(60)
    }
  },
  mounted() {
    this.onRestWindow()
    window.addEventListener('resize', this.onRestWindow)
    let resource = JSON.parse(Cookies.get('userInfo')).resource;
    this.resource = resource
    this.init();

  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onRestWindow)
  }
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
@import '../../../../styles/table-common.less';
@import '../../../personInfo.less';

.tableContainer {
  width: 100%;
  height: calc(100% - 100px);
}

.search {
  .operation {
    margin-bottom: 2vh;
  }

  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }

  .select-clear {
    margin-left: 10px;
  }

  .page {
    margin-top: 2vh;
  }

  .drop-down {
    margin-left: 5px;
  }
}

.all-height {
  height: 100%;
}
</style>
<style lang="less" scoped>
// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: -8px !important;
    .ivu-form-item-content {
        display: flex;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 102px !important;
    }
}
</style>
